<template>
  <view class="tqxt">
    <u-form
      :model="tqxtFrom"
      ref="uForm"
      :rules="rules"
      label-width="160"
      :label-style="{
        fontSize: '24rpx',
        fontFamily: 'PingFang SC',
        fontWeight: '400',
        color: '#272B32',
      }"
    >
      <view class="item">
        <u-form-item label="完成情况" label-position="top" :required="true"
          ><u-input v-model="tqxtFrom.wcqk" type="textarea"
        /></u-form-item>
        <u-form-item label="上传附件" :required="true"
          ><u-input disabled placeholder="请选取上传文件" type="file" />
          <u-upload
            ref="uUpload"
            :action="action"
            :auto-upload="false"
            width="100"
            height="50"
            :custom-btn="true"
            ><view slot="addBtn" class="slot-btn">
              <image
                src="../../../../static/images/ZDXM/upload.png"
                mode=""
              /> </view></u-upload></u-form-item
        ><view class="pre-box" v-if="!showUploadList">
          <view class="pre-item" v-for="(item, index) in lists" :key="index">
            <image
              class="pre-item-image"
              :src="item.url"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
    </u-form>
    <view class="tqxt_buttons">
      <view @tap="showTqxt = true">保存草稿</view>
      <view @tap="toBjcg">办结</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tqxtFrom: {
        wcqk: "",
      },
      rules: {
        number: [
          {
            required: true,
            message: "请输入整数，如1、5、10",
            type: "number",
            trigger: "blur,change",
          },
        ],
      },
      action: "文件上传地址",
      lists: [],
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    // 得到整个组件对象，内部图片列表变量为"lists"
    this.lists = this.$refs.uUpload.lists;
  },
  methods: {
    toBjcg() {
      uni.navigateTo({
        url: "/pages/zdxm/details/tqxt/bjcg/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tqxt {
  background-color: #f2f4fa;
  padding: 20rpx;
  .item {
    width: 710rpx;
    margin: 0 auto;
    margin-bottom: 30rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
    border-radius: 8rpx;
    padding-left: 30rpx;
  }
}
.tqxt_buttons {
  width: 100%;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  view:nth-child(1) {
    flex: 1;
    background: #ffffff;
    border: 1rpx solid #e7e9f0;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8e9cb3;
  }
  view:nth-child(2) {
    flex: 1;
    background: #3074ff;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fefefe;
  }
}
.slot-btn {
  margin-right: 30rpx;
  display: flex;
  align-items: center;
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
